<script setup lang="ts">
import { getCurrentInstance, ref, reactive, watch, onBeforeMount, onMounted, onUpdated, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
let logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const forExtend = proxy.$route.query.exTend ? JSON.parse(proxy.$route.query.exTend) : {}
const forThan = proxy.$route.query.than || 0
// ----
const user = reactive({
  balance: 0,
  fullSalary: 0,
  claimSalary: 0,
  // ----
  day: '',
  title: '',
  content: '',
  limit: ''
})
// ----
const curkey = ref(0)
const forSearch = ref(proxy.$Store.get('forSearch') || {})
// ----
const tSpeed = 300
let bar = null
let clientWidth = 0
let navWidth = 0
let navSwiper = null
const areas = ref([])
// --mescroll--
const noData = proxy.$Global.noData
let mescroll = null
const items = ref([])

/* ---- */
const layer = ref()
const layerBox = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// ----
const setInitData = async () => {
  switch (Number(proxy.$route.query.pageType)) {
    case 1: {
      user.balance = Number(logUser.first_onbalance)
      user.fullSalary = Number(logUser.first_allacount)
      user.claimSalary = Number(logUser.first_allbalance) - Number(logUser.first_onbalance)
      // ----
      areas.value = [{
        value: '总计：' + Number(user.fullSalary).toFixed(2) + '元',
        text: '我的回款',
        head: [{
          name: '付款商户',
          key: 'name',
          style: { width: '34%' }
        }, {
          name: '付款金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '付款时间',
          key: 'date',
          style: { width: '32%' }
        }],
        type: 'post',
        url: 'wechat/get-mylevel',
        data: {
          parent_user_id: logUser.id,
          // ----
          sort: 'SORT_DESC',
          // ----
          config_id: userInfo.config_id,
          openid: userInfo.openid
        }
      }, {
        value: '总计：' + Number(user.claimSalary).toFixed(2) + '元',
        text: '领取明细',
        head: [{
          name: '领取人',
          key: 'name',
          style: { width: '30%' }
        }, {
          name: '金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '时间',
          key: 'date',
          style: { width: '30%' }
        }, {
          name: '状态',
          className: 'statusClass',
          iconName: 'statusIcon',
          style: { width: '16%', textAlign: 'center' }
        }],
        type: 'get',
        url: 'salary-log/index',
        data: {
          params: {
            'SalaryLogSearch[dealer_id]': logUser.id,
            'SalaryLogSearch[is_level]': 1,
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }]
      break
    }
    case 2: {
      user.balance = Number(logUser.second_onbalance)
      user.fullSalary = Number(logUser.second_allacount)
      user.claimSalary = Number(logUser.second_allbalance) - Number(logUser.second_onbalance)
      // ----
      areas.value = [{
        value: '总计：' + Number(user.fullSalary).toFixed(2) + '元',
        text: '团队回款',
        head: [{
          name: '团队成员',
          key: 'name',
          style: { width: '34%' }
        }, {
          name: '回款金额（元）',
          key: 'allAcount',
          isBtn: true,
          btnTxt: '详情',
          style: {},
          callback: (item) => {
            const options = {
              type: 4,
              infos: {
                head: [{
                  name: '回款商户',
                  key: 'name',
                  style: { width: '34%' }
                }, {
                  name: '回款金额（元）',
                  key: 'amount',
                  style: {}
                }, {
                  name: '回款时间',
                  key: 'date',
                  style: { width: '32%' }
                }],
                type: 'post',
                url: 'wechat/get-mylevel',
                data: { parent_user_id: item.id },
                page: { num: 0, size: 20, noSize: 20 },
                config: { config_id: userInfo.config_id, openid: userInfo.openid }
              }
            }
            proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
          }
        }],
        type: 'get',
        url: 'dealer/index',
        data: {
          params: {
            'DealerSearch[parent_dealer_id]': logUser.id,
            first_allacount: 'wpe',
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }, {
        value: '总计：' + Number(user.claimSalary).toFixed(2) + '元',
        text: '领取明细',
        head: [{
          name: '领取人',
          key: 'name',
          style: { width: '30%' }
        }, {
          name: '金额（元）',
          key: 'amount',
          style: {}
        }, {
          name: '时间',
          key: 'date',
          style: { width: '30%' }
        }, {
          name: '状态',
          className: 'statusClass',
          iconName: 'statusIcon',
          style: { width: '16%', textAlign: 'center' }
        }],
        type: 'get',
        url: 'salary-log/index',
        data: {
          params: {
            'SalaryLogSearch[dealer_id]': logUser.id,
            'SalaryLogSearch[is_level]': 2,
            // ----
            sort: 'SORT_DESC',
            // ----
            config_id: userInfo.config_id,
            openid: userInfo.openid
          }
        }
      }]
      break
    }
  }
  // ----
  if (Number(proxy.$route.query.pageType) === 3) {
    const extra = {
      config_id: userInfo.config_id,
      openid: userInfo.openid
    }
    Object.assign(extra, forExtend.data)
    // ----
    await proxy.$http[forExtend.type](forExtend.url, extra).then((res) => {
      const ATData = res.datainfo || {}
      user.balance = Number(ATData.agent_balance)
      user.fullSalary = Number(ATData.total_amount)
      user.claimSalary = Number(ATData.agent_albalance)
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
    // ----
    areas.value = [{
      value: '总计：' + Number(user.fullSalary).toFixed(2) + '元',
      text: '区域回款',
      head: [{
        name: '付款商户',
        key: 'name',
        style: { width: '34%' }
      }, {
        name: '付款金额（元）',
        key: 'amount',
        style: {}
      }, {
        name: '付款时间',
        key: 'date',
        style: { width: '32%' }
      }],
      type: 'post',
      url: 'wechat/get-mylevel',
      data: {
        dealer_id: logUser.id,
        is_agent: 'agent',
        // ----
        sort: 'SORT_DESC',
        // ----
        config_id: userInfo.config_id,
        openid: userInfo.openid
      }
    }, {
      value: '总计：' + Number(user.claimSalary).toFixed(2) + '元',
      text: '领取明细',
      head: [{
        name: '领取人',
        key: 'name',
        style: { width: '30%' }
      }, {
        name: '金额（元）',
        key: 'amount',
        style: {}
      }, {
        name: '时间',
        key: 'date',
        style: { width: '30%' }
      }, {
        name: '状态',
        className: 'statusClass',
        iconName: 'statusIcon',
        style: { width: '16%', textAlign: 'center' }
      }],
      type: 'get',
      url: 'salary-log/index',
      data: {
        params: {
          'SalaryLogSearch[dealer_id]': logUser.id,
          'SalaryLogSearch[is_level]': 3,
          // ----
          sort: 'SORT_DESC',
          // ----
          config_id: userInfo.config_id,
          openid: userInfo.openid
        }
      }
    }]
  }
}
// --initSwiperData || changeSwiperData--
const onSwiper = (swiper) => { navSwiper = swiper }
const initSwiper = (index) => {
  if (Number(areas.value.length) === 0) return false
  // --初始化--
  if (!navSwiper.el.querySelector('.bar')) {
    const newBar = document.createElement('div')
    newBar.setAttribute('class', 'bar')
    newBar.innerHTML = '<span class="xw-anim"></span>'
    navSwiper.wrapperEl.appendChild(newBar)
  }
  bar = navSwiper.el.querySelector('.bar')
  navSwiper.slides[navSwiper.activeIndex].querySelector('span').style.color = '#3388ff'
  // --Nav的可视宽度--
  clientWidth = navSwiper.wrapperEl.offsetWidth
  navWidth = 0
  for (let i = 0; i < navSwiper.slides.length; i++) {
    navWidth += navSwiper.slides[i].offsetWidth
  }
  // --点击slide事件--
  navSwiper.on('tap', () => {
    swiperMescroll(navSwiper.clickedIndex)
    // ----
    const newItems = [navSwiper.clickedIndex]
    proxy.$Myfun.setSearchRes(proxy, newItems, ['curIndex'], (result) => { forSearch.value = result })
  })
  // ----
  setTimeout(() => { swiperMescroll(index) }, 100)
}
const swiperMescroll = (index) => {
  const clickIndex = index
  const clickSlide = navSwiper.slides[clickIndex]
  const activeSlidePosition = navSwiper.slides[clickIndex].offsetLeft

  // --释放时导航移动过渡--
  bar.style.transitionDuration = tSpeed + 'ms'
  bar.style.width = clickSlide.offsetWidth + 'px'
  bar.querySelector('span').style.width = clickSlide.querySelector('span').offsetWidth + 'px'
  bar.style.transform = 'translateX(' + activeSlidePosition + 'px)'

  // --导航居中--
  const navSlideWidth = clickSlide.offsetWidth
  // --activeSlide距左边的距离--
  const navActiveSlideLeft = navSwiper.slides[clickIndex].offsetLeft

  navSwiper.setTransition(tSpeed)
  if (navWidth > clientWidth) {
    if (navActiveSlideLeft < (clientWidth - navSlideWidth) / 2) {
      navSwiper.setTranslate(0)
    } else if (navActiveSlideLeft > navWidth - (navSlideWidth + clientWidth) / 2) {
      navSwiper.setTranslate(clientWidth - navWidth)
    } else {
      navSwiper.setTranslate((clientWidth - navSlideWidth) / 2 - navActiveSlideLeft)
    }
  }

  navSwiper.slides.forEach((current) => { current.querySelector('span').style.color = '#111111' })
  clickSlide.style.transitionDuration = tSpeed + 'ms'
  clickSlide.querySelector('span').style.color = '#3388ff'
}
// ----
const getCurrencyInfo = async (callback) => {
  // --获取提现设置--
  const caseItems = forSys.filter((item) => { return String(item.name) === 'withdrawal_limit' })
  if (Number(caseItems.length) === 1) {
    proxy.$Myfun.getJsonData(caseItems[0].value, (resJson) => {
      user.day = resJson[0].day
      user.title = resJson[0].title
      user.content = resJson[0].content
      user.limit = resJson[0].limit
    })
  }
  // ----
  await setInitData()
  // --设置网页title--
  const forTitle = proxy.$route.query.title ? proxy.$route.query.title : document.title
  setAppTitle(forTitle)
  // ----
  callback && callback()
}
// --getData--
const startMeScroll = () => {
  mescroll = new MeScroll(proxy.$refs.dataScroll, {
    up: {
      callback: getListData,
      isBounce: false,
      page: { num: 0, size: 20 },
      htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
      noMoreSize: 20,
      toTop: {
        src: '/pics/mescroll-totop.png',
        offset: 1000
      },
      empty: {
        warpId: proxy.$refs.dataList,
        tip: noData
      }
    }
  })
}
const getListData = (page) => {
  const extra = {
    page: page.num,
    PageSize: page.size
  }
  switch (String(areas.value[curkey.value].type)) {
    case 'post': {
      Object.assign(areas.value[curkey.value].data, extra)
      break
    }
    case 'get': {
      Object.assign(areas.value[curkey.value].data.params, extra)
      break
    }
  }
  // ----
  getListDataFromNet({
    forType: areas.value[curkey.value].type,
    forUrl: areas.value[curkey.value].url,
    forData: areas.value[curkey.value].data
  }, page.num, page.size, (curPageData) => {
    switch (Number(curkey.value)) {
      case 0: {
        setListDataOne(curPageData).then((result) => {
          mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
          items.value = items.value.concat(result)
        })
        break
      }
      case 1: {
        setListDataTwo(curPageData).then((result) => {
          mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
          items.value = items.value.concat(result)
        })
        break
      }
    }
  }, (resMsg) => {
    mescroll.endErr()
    proxy.$Myfun.forToast(layer.value, 'open', resMsg)
  })
}
const getListDataFromNet = (option, pageNum, pageSize, successCallback, errorCallback) => {
  if (Number(pageNum) === 1) {
    if (document.querySelector('.upwarp-nodata')) { document.querySelector('.upwarp-nodata').style.visibility = 'hidden' }
    items.value = []
  }
  // ----
  proxy.$http[option.forType](option.forUrl, option.forData).then((res) => {
    switch (String(option.forType)) {
      case 'post': {
        if (res.success) {
          successCallback && successCallback(res.datainfo)
        } else { errorCallback && errorCallback(res.message) }
        break
      }
      case 'get': {
        successCallback && successCallback(res.items)
        break
      }
    }
  }).catch((err) => { errorCallback && errorCallback(err) })
}
const getNeedDate = async (curItem) => {
  if (curItem.dealer_id) {
    await proxy.$http.get('dealer/index', {
      params: { 'DealerSearch[id]': curItem.dealer_id }
    }).then((res) => {
      if (Number(res.items.length) > 0) curItem.name = proxy.$Myfun.setText(res.items[0].telphone)
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
}
const setListDataOne = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let curItem = {}
    // ----
    if (Number(proxy.$route.query.pageType) === 2) {
      curItem = {
        id: item.id,
        name: item.telphone,
        allAcount: item.first_allacount,
        styleOne: areas.value[curkey.value].head[0].style
      }
    } else {
      curItem = {
        id: item.id,
        dealer_id: item.dealer_id,
        name: '',
        amount: item.amount,
        date: item.created.split(' ')[0],
        styleOne: areas.value[curkey.value].head[0] ? areas.value[curkey.value].head[0].style : '',
        styleThree: areas.value[curkey.value].head[2] ? areas.value[curkey.value].head[2].style : ''
      }
      await getNeedDate(curItem)
    }
    // ----
    newItems.push(curItem)
  }
  return newItems
}
const setListDataTwo = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let forStatusClass = ''
    let forStatusIcon = ''
    switch (String(item.attend_status)) {
      case '支付成功': {
        forStatusClass = 'xw-color-1'
        forStatusIcon = 'fa fa-check'
        break
      }
      case '支付失败': {
        forStatusClass = 'xw-color-24'
        forStatusIcon = 'fa fa-xmark-large'
        break
      }
      default: {
        forStatusClass = 'xw-color-2'
        forStatusIcon = 'far fa-clock-three'
      }
    }
    // ----
    newItems.push({
      id: item.id,
      name: item.telphone,
      amount: item.amount,
      date: proxy.$Myfun.getDateShort(item.created_at),
      statusClass: forStatusClass,
      statusIcon: forStatusIcon,
      styleOne: areas.value[curkey.value].head[0] ? areas.value[curkey.value].head[0].style : '',
      styleThree: areas.value[curkey.value].head[2] ? areas.value[curkey.value].head[2].style : '',
      styleFour: areas.value[curkey.value].head[3] ? areas.value[curkey.value].head[3].style : ''
    })
  }
  return newItems
}
const divScroll = (event) => { proxy.$Myfun.setImgToTop() }
// ----
const getAuditFun = (type, item, callback) => {
  switch (Number(type)) {
    case 1: {
      proxy.$http.post('wechat/receive-salary-date', {
        dealer_id: logUser.id,
        // ----
        config_id: userInfo.config_id,
        openid: userInfo.openid
      }).then((res) => {
        let forDate = ''
        if (res.datainfo && res.datainfo.pay_at && parseInt(res.datainfo.pay_at) > 0) forDate = res.datainfo.pay_at
        proxy.$Myfun.getDateLimit(forDate, (resDate) => {
          let options = {}
          if (Number(resDate) <= Number(user.day) && Number(user.day) > 0) {
            options = {
              title: user.title,
              content: user.limit,
              button: [{
                text: proxy.$Global.layer.btnCancel
              }, {
                text: '改日领取',
                class: 'xw-color-24'
              }]
            }
          } else {
            options = {
              title: user.title,
              content: user.content,
              button: [{
                text: proxy.$Global.layer.btnCancel
              }, {
                text: '确定领取',
                class: 'xw-color-24',
                callback: async () => {
                  layerBox.value.close()
                  // ----
                  let resRece = ''
                  await proxy.$http.post('wechat/receive-salary', {
                    dealer_id: logUser.id,
                    amount: user.balance,
                    // ----
                    source: forExtend.four,
                    type: forExtend.five,
                    // ----
                    config_id: userInfo.config_id,
                    openid: userInfo.openid
                  }).then((res) => { resRece = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
                  // ----
                  if (resRece) {
                    proxy.$Myfun.forToast(layer.value, 'open', resRece.message)
                    // ----
                    if (resRece.success) {
                      let resUser = []
                      await proxy.$http.get('dealer/index', { params: { 'DealerSearch[id]': logUser.id } }).then((res) => { resUser = res.items }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
                      // ----
                      if (Number(resUser.length) > 0) {
                        logUser = resUser[0]
                        setInitData()
                      }
                    }
                  }
                }
              }]
            }
          }
          proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
        })
      }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
      break
    }
    case 2: {
      callback && callback(item)
      break
    }
  }
}

/* ---- */
watch(() => forSearch.value, (newVal, oldVal) => {
  curkey.value = newVal.curIndex || 0
  // --重新请求数据--
  mescroll.scrollTo(0)
  mescroll.resetUpScroll()
}, { deep: true })

/* ---- */
onBeforeMount(() => {
  curkey.value = forSearch.value.curIndex || 0
})
onMounted(() => {
  if (!proxy.$route.query.pageType) return false
  // ----
  getCurrencyInfo(() => {
    nextTick(() => { initSwiper(curkey.value) })
    // --创建MeScroll对象--
    setTimeout(() => { startMeScroll() }, 500)
  })
})
onUpdated(() => { nextTick(() => { proxy.$Myfun.setSectionH() }) })
onBeforeRouteLeave(() => {
  if (mescroll) mescroll.destroy()
  proxy.$Store.remove('forSearch')
})
</script>

<template>
  <div>
    <header class="xw-bg-gray">
      <div class="forCash">
        <div class="FCH-msg">{{forExtend.one}} = {{forExtend.two}} * {{forThan}}</div>
        <div class="FCH-con xw-flex xw-flex-align">
          <span>{{forExtend.three}}：</span>
          <div class="xw-flex-W1 xw-flex xw-flex-align">{{Number(user.balance).toFixed(2)}}<i>元</i></div>
          <a class="xw-btn xw-bgCL-12" @click="getAuditFun(1)" v-if="Number(user.balance) > 0">领取提成</a>
        </div>
      </div>
      <div class="FNV-menu" v-if="Number(areas.length) > 0">
        <swiper :slides-per-view="2" @swiper="onSwiper">
          <swiper-slide v-for="(item, index) in areas"><span>
            <div class="FNV-menu-title">{{item.text}}</div>
            <div class="FNV-menu-msg">{{item.value}}</div>
          </span></swiper-slide>
        </swiper>
      </div>
      <div class="list-box" v-if="areas[curkey]">
        <ul>
          <li class="xw-bg-white">
            <div v-for="(item, index) in areas[curkey].head" :style="item.style">{{item.name}}</div>
          </li>
        </ul>
      </div>
    </header>
    <div class="xw-section">
      <div ref="dataScroll" class="mescroll" @scroll="divScroll">
        <div class="list-cash" ref="dataList">
          <ul>
            <template v-if="Number(proxy.$route.query.pageType) === 2 && Number(curkey) === 0">
              <li class="xw-bg-white" v-for="(item, index) in items">
                <div :style="item.styleOne" v-if="areas[curkey].head[0]">{{item[areas[curkey].head[0].key]}}</div>
                <div class="xw-act" @click="getAuditFun(2, item, areas[curkey].head[1].callback)" v-if="areas[curkey].head[1]">
                  <p class="xw-flex xw-flex-align xw-flex-justify" v-if="areas[curkey].head[1].isBtn">{{item[areas[curkey].head[1].key]}}<span class="xw-btn xw-WBlue">{{areas[curkey].head[1].btnTxt}}</span></p>
                  <template v-else >{{item[areas[curkey].head[1].key]}}</template>
                </div>
                <div :style="item.styleThree" v-if="areas[curkey].head[2]">{{item[areas[curkey].head[2].key]}}</div>
              </li>
            </template>
            <template v-else>
              <li class="xw-bg-white" v-for="(item, index) in items" :class="[areas[curkey].head[3] ? item[areas[curkey].head[3].className] : '']">
                <div :style="item.styleOne" v-if="areas[curkey].head[0]">{{item[areas[curkey].head[0].key]}}</div>
                <div v-if="areas[curkey].head[1]">{{item[areas[curkey].head[1].key]}}</div>
                <div :style="item.styleThree" v-if="areas[curkey].head[2]">{{item[areas[curkey].head[2].key]}}</div>
                <div :style="item.styleFour" v-if="areas[curkey].head[3]">
                  <p class="xw-flex xw-flex-center"><em :class="item[areas[curkey].head[3].iconName]"></em></p>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <layer-view ref="layer"/>
    <layer-view ref="layerBox"/>
  </div>
</template>

<style scoped>
/* ---- */
.FNV-menu { margin: 1rem 0 0; height: 4.6rem; }
.FNV-menu .swiper { height: 100%; }

/* ---- */
.FCH-msg { margin: 1rem 1rem 0; }
.FCH-con { margin: 0.5rem 1rem 0; }
.FCH-con div { font-size: 2.4rem; }
.FCH-con div i { margin-left: 0.2rem; font-size: 1.2rem; }

/* ---- */
.list-box { margin: 1rem 1rem 0; }
.list-box ul { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.list-box ul li { display: table-row; border-style: solid; border-color: #d7d7d7; border-width: 1px 1px 0 0; }
.list-box ul li div { display: table-cell; padding: 0.5rem; line-height: 2.5rem; font-weight: bold; vertical-align: middle; word-wrap: break-word; word-break: break-all; border-style: solid; border-color: #d7d7d7; border-width: 0 0 1px 1px; }

/* ---- */
.list-cash { margin: -1px 1rem 0; }
.list-cash ul { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.list-cash ul li { display: table-row; border-style: solid; border-color: #d7d7d7; border-width: 1px 1px 0 0; }
.list-cash ul li div { display: table-cell; padding: 0.5rem; line-height: 2.5rem; font-size: 1.3rem; vertical-align: middle; word-wrap: break-word; word-break: break-all; border-style: solid; border-color: #d7d7d7; border-width: 0 0 1px 1px; }
/* ---- */
.list-cash div p .xw-btn { padding: 0 1rem; font-size: 1.2rem; -webkit-border-radius: 1.3rem; -moz-border-radius: 1.3rem; border-radius: 1.3rem; }
.list-cash div p em { font-size: 1.6rem; }
</style>
